<!--文件夹——查看视频弹框-->
<template>
  <ele-modal
    width="740px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="预览"
    @update:visible="updateVisible"
  >
    <!--     v-if="i.status==3 && i.videoUrl" :style="hover>=0 && hover==j  ? 'height:240px;':''" -->

    <video :src="videoUrl" style="width: 700px;" @play="onPlay" @pause="onPause"></video>
    <button @click="togglePlay">{{ playing ? 'Pause' : 'Play' }}</button>

  </ele-modal>
</template>

<script>
  export default {
    name: "look-video",
    props:{
      // 弹窗是否打开
      visible: Boolean,
      videoUrl:String//视频url
    },
    data(){
      return{
        playing: false,
        loading:false,
      }
    },
    methods:{
      show(){
        const video = this.$el.querySelector('video');
        video.play();
      },
      togglePlay() {
        this.playing = !this.playing;
        const video = this.$el.querySelector('video');
        if (this.playing) {
          video.play();
        } else {
          video.pause();
        }
      },
      onPlay() {
        this.playing = true;
      },
      onPause() {
        this.playing = false;
      },
      /* 更新 visible */
      updateVisible(value) {
        this.loading=false
        this.$emit('update:visible', value);
      }
    }
  }
</script>

<style scoped>

</style>
